﻿body, input
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333333;
    -webkit-text-size-adjust: 100%;
}

input, textarea
{
    /*
    Removes the default webkit design stuff from the design
*/
    -webkit-appearance: none;
    -webkit-border-radius: 0;
}

body
{
    /*
    Because of the complex width control, never set any margin or padding!
*/
    margin: 0px;
    padding: 0px;
}

#facebox-like-box
{
    position: fixed;
    right: -292px;
    top: 230px;
    background: #FFFFFF;
    z-index: 99999;
}

    #facebox-like-box img.fb-button
    {
        display: block;
        left: -40px;
        position: absolute;
        cursor: pointer;
        z-index: 99999;
    }

#fb
{
    margin: 0px;
    position: static;
    overflow: hidden;
    right: -300px;
    z-index: 99999;
}

.capitalize
{
    text-transform: capitalize;
}

.press-titile
{
    text-transform: capitalize;
    font-weight: bold;
    font-size: 16px;
    color: #0095dd;
}

a
{
    color: #7f7f7f;
    text-decoration: none;
}

    a:link, a:visited
    {
    }

    a:hover, a:active
    {
        text-decoration: underline;
    }

#MainHeading
{
    font-size: 1.5em;
    margin-top: 0px;
}

#SuppliedBy
{
    text-align: right;
    padding-top: 10px;
}

body[dir=rtl] #SuppliedBy
{
    text-align: left;
}

.display-none
{
    display: none;
}

.PressRelease
{
    opacity: 1;
    height: auto;
    display: block;
    visibility: visible;
    position: static;
    top: auto;
    left: auto;
    width: auto;
}

#TotalContainer.NoTabsVisible
{
    border-bottom: 1px solid #e1e1e1;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.HintObject
{
    background: #ffffff;
    background: rgba(255,255,255,0.70);
    border: 1px solid #333333;
    border-radius: 5px;
    padding: 10px;
    color: #333333;
    box-shadow: 2px 2px 5px 0px #9d9d9d;
    text-shadow: 1px 1px #fff;
    text-shadow: 1px 1px #fff,-1px -1px #fff;
}

#Main
{
    /*
    Because of the complex width control only set width related settings here
*/
    width: 100%;
    max-width: 1000px;
    min-width: 180px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0 auto 0 auto;
}

/*** Standard Euroland Controls ***/
.euButton
{
    background-color: #319DDD;
    border: 0px;
    color: #ffffff;
    padding: 3px 10px 3px 10px;
    cursor: pointer;
}
/*** Start of: Tab Controls ***/

#Tabs
{
    padding-bottom: 10px;
    padding-top: 10px;
}

.Tabs
{
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    display: block;
    border-bottom: 1px solid #e1e1e1;
}

.Tabs-Tab
{
    display: inline-block;
    zoom: 1;
    *display: inline;
    /*word-spacing: -5px;*/
    margin-right: 5px;
    position: relative;
    top: 1px;
}

body[dir=rtl] .Tabs-Tab
{
    margin-right: 0px;
    margin-left: 5px;
}

.Tabs-Tab-Container
{
    display: block;
    border: 1px solid #e1e1e1;
    padding: 5px 28px 5px 28px;
    line-height: 1.5em;
    background: #fafafa;
    color: #7f7f7f;
    text-decoration: none;
}

    .Tabs-Tab-Container.selected
    {
        color: #333333;
        background: #ffffff;
        border-bottom: 1px solid #ffffff;
        cursor: default;
        font-weight: bold;
        text-decoration: none;
    }

/*** End of: Tab Controls | Start of: SearchContainer ***/

#SearchContainer
{
    padding: 7px 0px 7px 0px;
}

.InputBox
{
    border-top: 1px solid #c3c3c3;
    border-bottom: 1px solid #c3c3c3;
    border-left: 1px solid #c3c3c3;
    border-right: 1px solid #c3c3c3;
    padding: 5px;
    margin: 3px 0px 3px 0px;
}

.DateSelection
{
    white-space: nowrap;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 3px;
    margin-bottom: 3px;
    cursor: pointer;
    display: inline-block;
    zoom: 1;
    *display: inline;
}

.DateSelection-InputBox
{
    width: 80px;
    cursor: pointer;
    margin: 0px;
}

#SearchBox
{
    width: 130px;
}

.icon
{
    width: 30px;
    height: 30px;
    vertical-align: middle;
}

.icon-pdf
{
    background: url('images/pdf.gif') no-repeat;
}

.icon-xls
{
    background: url('images/excel.gif') no-repeat;
}

.DateSelection-Icon
{
    margin-left: 3px;
}

body[dir=rtl] .DateSelection-Icon
{
    margin-left: 0px;
    margin-right: 3px;
}

#SearchButton
{
    cursor: default;
}

    #SearchButton.ActiveButton,
    #SearchButton.ActivePeriodButton
    {
        cursor: pointer;
    }

.InactiveInputBox
{
    color: #7f7f7f;
}

.NewsColumn-Container .PressRelease-Attachment
{
    float: right!important;
    padding-right: 5px;
    padding-top: 0px;
}

.PressRelease-AttachmentClearer
{
    clear: both;
}

.NoChange-NewsColumn
{
    display: block;
}

@media (min-width: 0px) and (max-width: 465px)
{
    /*
    465px is the point at with, by the default design, the "To" and "From" Calendars must go at separate lines
*/
    .DateSelection
    {
        margin-left: 0px;
    }

    #FromCalendarContrainer
    {
        display: block;
    }
}

#ErrorContainer
{
    color: #c3585d;
    font-size: 1.0em;
}

#ErrorMessageCloseButton
{
    margin-right: 5px;
}

/*** End of: Search Controls | Start of: Paging Controls ***/

#PagesContainer
{
    /*text-align: center;*/
}

.Pages
{
    width: 100%;
}

.Pages-ArrowContainer
{
    width: 40px;
}

.Pages-PageMarker
{
    margin: 0px 3px 0px 3px;
    cursor: pointer;
}

.Pages-SelectedPageMarker
{
    color: #7f7f7f;
    text-decoration: underline;
    cursor: default;
}

.Pages-Arrow
{
    cursor: pointer;
}

/*** End of: Paging Controls | Start of: Periods ***/

#Periods
{
    width: 100%;
    border-collapse: collapse;
    border: 0px;
}

#YearPeriodsContainer
{
    text-align: right;
}

body[dir=rtl] #YearPeriodsContainer
{
    text-align: left;
}

#CurrentPeriodContainer
{
    font-weight: bold;
    font-size: 1.16em;
}

/*** End of: Periods | Start of: Types ***/

#Types
{
    padding-bottom: 10px;
}

.Type
{
    border-radius: 5px;
    padding: 3px 10px 3px 10px;
    background: #ededed;
    border: 1px solid #e3e3e3;
    color: #8d8d8d;
    margin: 5px;
    cursor: pointer;
}

.TypeSelected
{
    background: #bbbbbb;
    border-color: #ebebeb;
    color: #333333;
}

/*** End of: Types | Start of: Column Structure ***/

#SortingContainer
{
    /*word-spacing: -5px;*/
    font-size: 1em;
    color: #7f7f7f;
    padding-bottom: 3px;
}

.SortingArrowIcon
{
    border: 0px;
}

.ColumnLayoutColumn
{
    display: inline-block;
    zoom: 1;
    *display: inline;
    vertical-align: top;
}

.Change-Column
{
    text-align: right;
}

body[dir=rtl] .ChangeColumn-Container,
body[dir=rtl] .ChangeColumn-Container
{
    text-align: left;
}

.PressRelease-Message
{
    padding-top: 5px;
}

.PressRelease-Attachment
{
    text-align: left;
    padding-top: 3px;
}
/*
div.PressRelease div.Attachment a.Attachment {
    margin-right: 0px;
}
*/
.PressRelease-ReadMore
{
    text-align: right;
    text-transform: capitalize;
}

.PressRelease-NewsDate
{
    font-size: 1em;
}

.PressRelease-NewsType
{
    font-size: 1em;
    color: #7f7f7f;
    margin-left: 10px;
}

.PressRelease-NewsTitle
{
    font-size: 1em;
    font-weight: bold;
    color: #333333;
    text-transform: capitalize;
}

    .PressRelease-NewsTitle:hover,
    .PressRelease-NewsTitle:active
    {
        color: #333333;
    }

.PressRelease-Change,
.PressRelease-NewsColumn
{
    padding-top: 7px;
}

.PressReleaseOdd
{
}

.PressReleaseEven
{
}

.PressRelease-Change
{
    font-size: 1.16em;
    font-weight: bold;
    color: #7f7f7f;
}

.Change-Positive
{
    color: #22b14c;
}

.Change-Negative
{
    color: #ed1c24;
}

#social-network
{
    left: 2px;
    top: 200px;
    position: fixed;
    z-index: 100;
    width: 60px;
}

    #social-network ul
    {
        margin: 2px;
        padding: 0 2.5px;
    }

    #social-network li
    {
        height: 100%;
        line-height: 13px;
        list-style: none outside none;
        margin: 0px;
        padding: 0 0px;
    }

.footer .footer-head
{
    height: 75px;
    background: #1AA1E1;
    margin-bottom: 25px;
}

.footer-head-wrapper
{
    margin: 0 auto;
}

.footer-head .title-footer
{
    float: left;
    text-align: left;
    font-size: 35px;
    color: #fff;
    font-family: Arial;
    margin-top: 15px;
    margin-left: 20px;
}

.footer-head .newsletter
{
    width: 510px;
    float: right;
}

.block-newsletter
{
    background: none !important;
}

.newsletter .title
{
    font-size: 35px !important;
    color: #fff !important;
    width: 200px;
    font-family: Arial;
    float: left;
    background: none !important;
    padding-top: 8px;
}

.block-newsletter .buttons
{
    margin-top: 5px;
}

input#newsletter-email
{
    border: medium none;
    float: left;
    height: 25px;
    padding: 2px 10px;
    width: 200px;
    font-family: Arial;
    margin-top: 15px;
}

input#newsletter-subscribe-button
{
    background: #E7E7E7;
    color: #666666;
    border: none;
    margin-left: 0px;
    margin-top: 15px;
    height: 29px;
    text-transform: uppercase;
}

.please-wait
{
    background: url('images/loader.gif') no-repeat;
    padding-left: 20px;
}

.footer
{
    /* border-top: 2px solid #666666; */
    background: #F9F9F9;
    text-align: left;
    clear: both;
    height: auto;
    margin: 0;
    padding: 0px;
}

.footer-poweredby
{
    text-align: center;
    clear: both;
    border-top: 1px solid #EEEEEE;
}

.footer-disclaimer
{
    padding-bottom: 10px;
    clear: both;
    font-size: 11px;
    text-align: center;
}

.scrollup:hover
{
    opacity: 0.5;
}

.scrollup
{
    background: url('images/totop.png') no-repeat left 0;
    border-radius: 100px;
    bottom: 25px;
    color: #FFFFFF;
    display: none;
    font-family: 'iconFont';
    font-size: 34px;
    padding: 12px 14px 13px;
    position: fixed;
    right: 25px;
    width:41px;
     height:41px;
    border: none;
    outline: none;
    z-index: 9999;
}
/*List images*/

.list-item .item
{
    display:inline-block;
    padding:5px;
}

/**************** Start of: Dimensions Control ***************/
/*
    This section is meant for controlling the widths and still maintaining the stable table structure, while retaining the possibility of a flowing design, 
    where the content and the size of the tool force the content on multible lines.

    In normal cases you should simply leave it as is and simply set the "max-width" attribute for the #Main in order to control the width of the tool.
*/

/***************** Separated Columns ****************/
/*
    By default we assume that the min width can be 500px (The @media overwrites this, but if the browser does not understand @media, then the default remains.)
*/

.SortingContainer-NewsColumn,
.SortingContainer-InstrumentChangeColumn
{
    /*
    The .SortingContainer-NewsColumn and .SortingContainer-InstrumentChangeColumn needs to be half of the remaining percentage of .ComparisonChangeColumn.
    This is because the "Share Price" phrases is translated and needs the extra space in order to not go on extra lines.
*/
    min-width: 41.5%;
    max-width: 100%;
}

.NewsColumn
{
    /*
    The div.NewsColumn under the div.PressRelease must be 100% - (.InstrumentChangeColumn width)- (.ComparisonChangeColumn width)
*/
    width: 68%;
}

.InstrumentChangeColumn
{
    /*
    The width here can be quite a bit smaller because the .SortingContainer-InstrumentChangeColumn is qute a bit more wide and so they are not linked.
*/
    width: 15%;
    min-width: 75px;
    max-width: 100%;
}

.ComparisonChangeColumn,
.SortingContainer-ComparisonChangeColumn
{
    /*
    The comparison Column's width needs to be the same in both the div#SortingContainer as well as the div.PressRelease
    This is to keep the illusion of a table.
*/
    width: 17%;
    min-width: 85px;
    max-width: 100%;
    *margin-left: -2px;
}


@media (min-width: 350px) and (max-width: 520px)
{
    /*
    When the width is lowwer than 500px on with the default settings are done, this section goes down to 350px
*/
    .SortingContainer-NewsColumn,
    .SortingContainer-InstrumentChangeColumn
    {
        /*
        The div#SortingContainer's div.NewsColumn and div.ChangeColumn needs to be half of the remaining percentage of div.ComparisonChangeColumn.
        This is because the "Share Price" phrases is translated and needs the extra space in order to not go on extra lines.
    */
        min-width: 37.8%;
        max-width: 100%;
    }

    .NewsColumn
    {
        /*
        The div.NewsColumn under the div.PressRelease must be 100% - (.InstrumentChangeColumn width)- (.ComparisonChangeColumn width)
    */
        width: 53.6%;
    }

    .InstrumentChangeColumn
    {
        /*
        The width here can be quite a bit smaller because the .SortingContainer-InstrumentChangeColumn is qute a bit more wide and so they are not linked.
    */
        width: 22%;
        min-width: 75px;
        max-width: 100%;
    }

    .ComparisonChangeColumn,
    .SortingContainer-ComparisonChangeColumn
    {
        /*
        The comparison Column's width needs to be the same in both the div#SortingContainer as well as the div.PressRelease
        This is to keep the illusion of a table.
    */
        width: 24.4%;
        min-width: 85px;
        max-width: 100%;
    }
}

@media (min-width: 0px) and (max-width: 370px)
{
    /*
    When the width is lower then 350px then this is invoked.
    In the two separate column version, the News own item is set on a separate line and the changes are in a 50% columns on the next line 
    i.e. the changes still retain their column structure only on the next line.
*/
    .NewsColumn,
    .SortingContainer-NewsColumn
    {
        display: block;
        width: 100%;
        text-align: left;
    }

    .InstrumentChangeColumn,
    .ComparisonChangeColumn,
    .SortingContainer-InstrumentChangeColumn,
    .SortingContainer-ComparisonChangeColumn
    {
        width: 50%;
        text-align: left;
    }
}

/***************** Single Individual Column ****************/
/*
    By default we assume that the column structure will be retained untill 350px.
*/

.SortingContainer-SingleChangeColumn-NewsColumn,
.SortingContainer-SingleChangeColumn-InstrumentChangeColumn,
.SortingContainer-SingleChangeColumn-ComparisonChangeColumn
{
    /*
    The SingleChangeColumn's headings are 50% each in order to allow for translations widths.
    This is because the SortingHeading phrases are translated and variable and needs the extra space in order to not go on extra lines.
*/
    width: 50%;
    min-width: 175px;
    max-width: 100%;
}

.SingleChangeColumn-NewsColumn
{
    /*
    The div.NewsColumn under the div.PressRelease must be 100% - (.SingleChangeColumn-InstrumentChangeColumn width or .SingleChangeColumn-ComparisonChangeColumn width)
*/
    width: 80%;
}

.SingleChangeColumn-InstrumentChangeColumn,
.SingleChangeColumn-ComparisonChangeColumn
{
    /*
    The width here can be quite a bit smaller because the div#SortingContainer's change columns is qute a bit more wide and so they are not linked.
*/
    width: 20%;
    min-width: 70px;
    max-width: 100%;
}

.SingleChangeColumn-InstrumentChangeColumn,
.SingleChangeColumn-ComparisonChangeColumn,
.SortingContainer-SingleChangeColumn-InstrumentChangeColumn,
.SortingContainer-SingleChangeColumn-ComparisonChangeColumn
{
    /*
    This is required so that in IE7- the columns would remain stable
*/
    *margin-left: -2px;
}


@media (min-width: 250px) and (max-width: 370px)
{
    /*
    This will be invoked, when the width goes lower that the default assumed minimum width of 350px
*/
    .SortingContainer-SingleChangeColumn-NewsColumn,
    .SortingContainer-SingleChangeColumn-InstrumentChangeColumn,
    .SortingContainer-SingleChangeColumn-ComparisonChangeColumn
    {
        /*
        The SingleChangeColumn's headings are 50% each in order to allow for translations widths.
        This is because the SortingHeading phrases are translated and variable and needs the extra space in order to not go on extra lines.
    */
        width: 50%;
        min-width: 125px;
        max-width: 100%;
    }

    .SingleChangeColumn-NewsColumn
    {
        /*
        The div.NewsColumn under the div.PressRelease must be 100% - (.SingleChangeColumn-InstrumentChangeColumn width or .SingleChangeColumn-ComparisonChangeColumn width)
    */
        width: 70%;
    }

    .SingleChangeColumn-InstrumentChangeColumn,
    .SingleChangeColumn-ComparisonChangeColumn
    {
        /*
        The width here can be quite a bit smaller because the div#SortingContainer's change columns is qute a bit more wide and so they are not linked.
    */
        width: 30%;
        min-width: 75px;
        max-width: 100%;
    }
}

@media (min-width: 0px) and (max-width: 270px)
{

    .SingleChangeColumn-InstrumentChangeColumn,
    .SingleChangeColumn-ComparisonChangeColumn,
    .SingleChangeColumn-NewsColumn,
    .SortingContainer-SingleChangeColumn-NewsColumn,
    .SortingContainer-SingleChangeColumn-InstrumentChangeColumn,
    .SortingContainer-SingleChangeColumn-ComparisonChangeColumn
    {
        width: 100%;
        display: block;
        text-align: left;
    }
}

/***************** Single Combined Column ****************/
/*
    By default we assume that the min width can be 400px (The @media overwrites this, but if the browser does not understand @media, then the default remains.)
*/

.SortingContainer-CombinedChange-NewsColumn,
.SortingContainer-CombinedChangeColumn
{
    /*
    The heading's are 50% each in order to allow for translations widths.
    This is because the SortingHeading phrases are translated and variable and needs the extra space in order to not go on extra lines.
*/
    width: 50%;
    min-width: 200px;
    max-width: 100%;
}

.SortingContainer-CombinedChangeColumn,
.CombinedChangeColumn
{
    /*
    This is required so that in IE7- the columns would remain stable
*/
    *margin-left: -2px;
}

.CombinedChange-NewsColumn
{
    /*
    The div.NewsColumn under the div.PressRelease must be 100% - (.CombinedChangeColumn width)
*/
    width: 69%;
}

.CombinedChangeColumn
{
    /*
    The width here can be quite a bit smaller because the #SortingContainer's change column is qute a bit more wide and so they are not linked.
*/
    width: 31%;
    min-width: 124px;
    max-width: 100%;
}

@media (min-width: 300px) and (max-width: 420px)
{
    /*
    This is invoked when the width is lower than 400px, goes down to 300px
*/
    .SortingContainer-CombinedChange-NewsColumn,
    .SortingContainer-CombinedChangeColumn
    {
        /*
        The heading's are 50% each in order to allow for translations widths.
        This is because the SortingHeading phrases are translated and variable and needs the extra space in order to not go on extra lines.
    */
        width: 50%;
        min-width: 150px;
        max-width: 100%;
    }

    .CombinedChange-NewsColumn
    {
        /*
        The div.NewsColumn under the div.PressRelease must be 100% - (.CombinedChangeColumn width)
    */
        width: 58%;
    }

    .CombinedChangeColumn
    {
        /*
        The width here can be quite a bit smaller because the #SortingContainer's change column is qute a bit more wide and so they are not linked.
    */
        width: 42%;
        min-width: 124px;
        max-width: 100%;
    }
}

@media (min-width: 0px) and (max-width: 320px)
{
    /*
    This is invoked when the width is lowwer than 300px
*/
    .SortingContainer-CombinedChange-NewsColumn,
    .SortingContainer-CombinedChangeColumn,
    .CombinedChange-NewsColumn,
    .CombinedChangeColumn
    {
        /*
        Because there are only 2 columns anyway, then, when the change column goes to the second line then all of the settings can be applied to all the object at once.
    */
        width: 100%;
        display: block;
    }

    .SortingContainer-CombinedChangeColumn,
    .CombinedChangeColumn
    {
        text-align: left;
    }
}

/**************** End of: Dimensions Control ***************/

.NoChange-NewsColumn
{
    display: block;
}

.temp-container
{
    display: none;
}
